import React from 'react';
import {Modal, Form, Input, Select, Radio, Button} from 'antd';
import {WeaBrowser, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

import FormGroup from './base/FormGroup';

// 文档中心，数据来源
class Content_7_DataSource extends React.Component {
    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title,
        topDocs: this.props.tabData.topDocs,
        docSourceType: this.props.tabData.docSourceType || this.props.tabNew.docSourceType.selected,
        newsCenters: this.props.tabData.newsCenters,
        docCatalogs: this.props.tabData.docCatalogs,
        virtualCatalogs: this.props.tabData.virtualCatalogs,
        appointDocs: this.props.tabData.appointDocs,
        showMode: this.props.tabData.showMode || this.props.tabNew.showMode.selected,
        scrollDirection: this.props.tabData.scrollDirection || this.props.tabNew.scrollDirection.selected,
        isOpenAttachment: this.props.tabData.isOpenAttachment || this.props.tabNew.isOpenAttachment.selected,
        topDocsNames: this.props.tabData.topDocsNames,
        newsCentersNames: this.props.tabData.newsCentersNames,
        docCatalogsNames: this.props.tabData.docCatalogsNames,
        virtualCatalogsNames: this.props.tabData.virtualCatalogsNames,
        appointDocsNames: this.props.tabData.appointDocsNames,
    };
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onChangetopD = this.onChangetopD.bind(this);
    }
    onChangetopD(ids, names, datas){
        this.setState({
            topDocs: ids,
            topDocsNames: datas,
        })
    }
    onChange(type, ids, names, datas){
        if(type === 'newsCenters'){
             this.setState({
                newsCenters: ids,
                newsCentersNames: datas,
            })
        }
        if(type === 'docCatalogs'){
             this.setState({
                docCatalogs: ids,
                docCatalogsNames: datas,
            })
        }
        if(type === 'virtualCatalogs'){
             this.setState({
                virtualCatalogs: ids,
                virtualCatalogsNames: datas,
            })
        }
        if(type === 'appointDocs'){
             this.setState({
                appointDocs: ids,
                appointDocsNames: datas,
            })
        }
    }

    onOk(e) {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                return;
            }
            this.props.onOk(values);
        });
    }

    onCancel() {
        this.props.onCancel();
    }

    render() {
        const {getFieldProps} = this.props.form;
        const formItemLayout = this.props.formItemLayout;
        const tabNew = this.props.tabNew;

        getFieldProps('id', {initialValue: this.state.id});

        const titleProps = getFieldProps('title', {
            initialValue: this.state.title,
            rules: [
                {required: true, message: getLabel(388007,"请填写标题")},
            ]
        });
        
        const docSourceTypeProps = getFieldProps('docSourceType', {initialValue: this.state.docSourceType});
        const docSourceTypeOptions = tabNew.docSourceType.options.map((item, index) => {
            getFieldProps('newsCenters', {initialValue: this.state.newsCenters});
            getFieldProps('docCatalogs', {initialValue: this.state.docCatalogs});
            getFieldProps('virtualCatalogs', {initialValue: this.state.virtualCatalogs});
            getFieldProps('appointDocs', {initialValue: this.state.appointDocs});
            const { newsCentersNames, docCatalogsNames, virtualCatalogsNames, appointDocsNames } = this.state;
            const replaceDatas = { "newsCenters": newsCentersNames, "docCatalogs": docCatalogsNames, "virtualCatalogs": virtualCatalogsNames, "appointDocs": appointDocsNames  }[item.type] || [];
            const weabotype = { "newsCenters": '37', "docCatalogs": 'doccategory', "virtualCatalogs": 'docdummy', "appointDocs": '37' }[item.type] || '';
            const MultCheckbox = { "newsCenters": false, "docCatalogs": true, "virtualCatalogs": true, "appointDocs": false }[item.type] || false;
            return (
                <Radio key={index} style={{display: '-webkit-box'}} value={item.value}>
                    {item.label}
                    <div style={{display: 'inline-block', width: '410px', margin: '5px', verticalAlign: 'middle'}}>
                        <WeaBrowser
                            //type={'docdummy'}
                            type={weabotype}
                            isMultCheckbox = {MultCheckbox}
                            //isMultCheckbox = {true}
                            isSingle={false}
                            replaceDatas={replaceDatas}
                            onChange={(ids, names, datas) => this.onChange(item.type, ids, names, datas)} 
                        />
                    </div>
                </Radio>
            );
        });
        const { topDocsNames } = this.state;
        const showModeProps = getFieldProps('showMode', {initialValue: this.state.showMode});
        const showModeOptions = tabNew.showMode.options.map((item, index) => {
            return <Option key={index} value={item.key}>{item.value}</Option>;
        });

        const scrollDirectionProps = getFieldProps('scrollDirection', {initialValue: this.state.scrollDirection});
        const scrollDirectionOptions = tabNew.scrollDirection.options.map((item, index) => {
            return <Option key={index} value={item.key}>{item.value}</Option>;
        });

        const isOpenAttachmentProps = getFieldProps('isOpenAttachment', {initialValue: this.state.isOpenAttachment});
        const isOpenAttachmentOptions = tabNew.isOpenAttachment.options.map((item, index) => {
            return <Option key={index} value={item.key}>{item.value}</Option>;
        });
        
        return (
            <Modal
                title={getLabel(19480, '内容设置')}
                width="660px"
                wrapClassName="esetting-modal"
                visible={true}
                footer={
                    <div className="esetting-confirm">
                        <Button type="primary" onClick={this.onOk.bind(this)}>确定</Button>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <Button type="ghost" onClick={this.onCancel.bind(this)}>取消</Button>
                    </div>
                }
                onOk={this.onOk.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form horizontal className="esetting-form">
                    <FormGroup title={getLabel(33396, '设置项')}>
                        <FormItem label={getLabel(229, "标题")} {...formItemLayout}>
                            <Input type="text" size="default" style={{width: '485px'}} {...titleProps}/>
                        </FormItem>
                        <FormItem label={getLabel(23784, "文档置顶")} {...formItemLayout}>
                            <div style={{display: 'inline-block', width: '410px', margin: '5px', verticalAlign: 'middle'}}>
                                <WeaBrowser
                                    type={37}
                                    isSingle={false}
                                    replaceDatas={topDocsNames}
                                    onChange={(ids, names, datas) => this.onChangetopD( ids, names, datas)} 
                                />
                            </div>
                        </FormItem>
                        <FormItem label={getLabel(20532,"文档来源")} {...formItemLayout}>
                            <RadioGroup {...docSourceTypeProps}>
                                {docSourceTypeOptions}
                            </RadioGroup>
                        </FormItem>
                        <FormItem label={getLabel(21653,"显示方式")} {...formItemLayout}>
                            <Select size="default" style={{width: '100px'}} {...showModeProps}>
                                {showModeOptions}
                            </Select>
                        </FormItem>
                        <FormItem label={getLabel(20281,"滚动方向")} {...formItemLayout}>
                            <Select size="default" style={{width: '100px'}} {...scrollDirectionProps}>
                                {scrollDirectionOptions}
                            </Select>
                        </FormItem>
                        <FormItem label={getLabel(20895,"直接打开附件")} {...formItemLayout}>
                            <Select size="default" style={{width: '100px'}} {...isOpenAttachmentProps}>
                                {isOpenAttachmentOptions}
                            </Select>
                            <span style={{marginLeft: '10px'}}>{getLabel(20896,"当文档内容为空，且此文档仅有一个附件时")}</span>
                        </FormItem>
                    </FormGroup>
                </Form>
            </Modal>
        );
    }
}

Content_7_DataSource = Form.create()(Content_7_DataSource);

export default Content_7_DataSource;